<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
	  <base th:href="@{/}">
    <title>尚硅谷会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="static/css/style.css" />
    <!--1. 导入vue.js文件-->
		<script src="static/script/vue.js"></script>
  </head>
  <body>
		
		<div id="app">
			<div id="login_header">
				<a href="index.html">
					<img class="logo_img" alt="" src="static/img/logo.gif" />
				</a>
			</div>

			<div class="login_banner">
				<div id="l_content">
					<span class="login_word">欢迎登录</span>
				</div>

				<div id="content">
					<div class="login_form">
						<div class="login_box">
							<div class="tit">
								<h1>尚硅谷会员</h1>
							</div>
							<div class="msg_cont">
								<b></b>
								<span class="errorMsg" v-text="msg"></span>
							</div>
							<div class="form">
								<!--<form action="login_success.html" >-->
								<form action="user?method=login" method="post">
									<label>用户名称：</label>
									<input
										class="itxt"
										type="text"
										placeholder="请输入用户名"
										autocomplete="off"
										tabindex="1"
										name="username"
										id="username"
										v-model="username"
									/>
									<br />
									<br />
									<label>用户密码：</label>
									<input
										class="itxt"
										type="password"
										placeholder="请输入密码"
										autocomplete="off"
										tabindex="1"
										name="password"
										id="password"
										v-model="password"
									/>
									<br />
									<br />
									<input type="submit" value="登录" id="sub_btn" @click="login"/>
								</form>
								<div class="tit">
									<a href="user?method=toRegister">立即注册</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="bottom">
				<span>
					尚硅谷书城.Copyright &copy;2015
				</span>
			</div>
		</div>
		<script>
			
			 const app = new Vue({
				 el: "#app",
				 data: {
					 username: '',
					 password: '',
					 msg: '[[${msg==null? "请输入用户名和密码" : msg}]]'
				 },
				 methods: {
					 login(){
						 if(this.username === ''){
							 this.msg = "请输入用户名"
							 //阻止事件提交
							 event.preventDefault()
						 }
						 if(this.password === ''){
							 this.msg = "请输入密码"
							 //阻止事件提交
							 event.preventDefault()
						 }
					 }
				 }
			 })
				
		</script>
  </body>
</html>
